<template>
  <div class="profile">
    <common-header></common-header>
    <div class="content">
      <div class="form-title">输入新密码：</div>
      <input type="password" class="form-ipt" placeholder="输入新密码" v-model="password" />
            <input type="password" class="form-ipt" placeholder="请再次输入密码" v-model="password2" />
      <button class="btn" @click="update">确认修改</button>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import moment from "moment";
export default {
  data() {
    return {
      password: ""
    };
  },
  mounted() {},
  methods: {
    update() {
      if (this.password === "") {
        this.$toast.info("新密码不能为空");
      } else if (this.password !== this.password2) {
        this.$toast.info("两次密码不一致");
        return;
        } else if (this.password.length < 6) {
        this.$toast.info("长度应大于6位");
      } else {
        this.$api.auth.changePassword(this.password).then(data => {
          this.$toast.success("修改成功");
          this.password = "";
          this.$router.push("/profile");
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  margin: 30px 15%;
  padding: 20px 30px;
  background: #fff;
  box-shadow: 0 0 10px #fff;
}
</style>
